<template>
  <div class="nav-bar">
    <div
      v-for="(item, index) in menuData"
      :key="item.title + index"
      class="nav-bar__item"
      :class="{ 'nav-bar__item--active': item.actived }"
      @click="handleLocation(item)"
    >
      <img class="item__icon" :src="item.icon" alt="" />
      {{ item.title }}
    </div>
  </div>
</template>

<script setup lang="ts">
import iconList from '../utils/icon'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import type { RouteRecordNameGeneric } from 'vue-router'
interface MenuItem {
  title: string
  name: RouteRecordNameGeneric
  path: string
  icon: string
  actived: boolean
}

const router = useRouter()
const allRoutes = router.options.routes

const menuData: MenuItem[] = reactive([
  {
    title: '总览面板',
    name: allRoutes[0].name,
    path: allRoutes[0].path,
    icon: iconList.iconDashboard,
    actived: true
  },
  {
    title: '进程信息',
    name: allRoutes[1].name,
    path: allRoutes[1].path,
    icon: iconList.iconProcess,
    actived: false
  },
  {
    title: '缓存清理',
    name: allRoutes[2].name,
    path: allRoutes[2].path,
    icon: iconList.iconMemoryCls,
    actived: false
  }
])
const handleLocation = (obj: MenuItem): void => {
  for (let item of menuData) {
    item.actived = false
  }
  obj.actived = true
  router.replace({
    name: obj.name
  })
}
</script>

<style lang="less" scoped>
@item-height: 30px;
.nav-bar {
  width: 180px;
  background-color: var(--bg-gray);
  padding-top: 85px;
  &__item {
    display: flex;
    align-items: center;
    width: 95%;
    height: @item-height;
    line-height: @item-height;
    margin: 0 auto 10px;
    color: #ffffff;
    font-family: 'aliyuan';
    letter-spacing: 2px;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
    &--active {
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
}
.item__icon {
  width: 20px;
  height: auto;
  margin: 0 10px 0 20px;
}
</style>
